import { useEffect } from "react";
import { Card, List } from "antd-mobile";
import { BOX3_ITEM } from "../../constants/index";
import { BOX3_NAME } from "../../constants/index";
import "./_box3.css";
import styles from "../global_box.css";
import style from "./box3.css";
import { Box3 } from "../../components/index_box/chart_box3";
import { useModel } from 'umi';

const BoxPage3 = () => {
    const { setName } = useModel('global')
    useEffect(() => {
        setName(BOX3_NAME)
    }, [])
    return (
        <div className={styles.bg}>
            <div style={{ height: '55px' }}></div>
            <div className={styles.main}>
                <div className={styles.top_echart}>
                    <div className={styles.title}>{BOX3_ITEM.LIST1.HEADER}</div>
                    <Box3 hasTitle={false}></Box3>
                </div>
                <div className={styles.bottom_list}>
                    <List header={BOX3_ITEM.LIST2.HEADER}>
                        {[1, 2, 3, 4, 5, 6].map(item => <List.Item key={item}>
                            <Card title={"医疗机构"}>
                                <div className={style.card_content} style={{ marginBottom: '12px' }}>
                                    <div>乡镇名称:乡镇名称</div>
                                    <div>所在区域:所在区域</div>
                                </div>
                                <div className={style.card_content}>
                                    <div>医生数量:10</div>
                                    <div className={style.createAt}>{"2024-4-22 11:36:00"}</div>
                                </div>
                            </Card>
                        </List.Item>)}
                    </List>
                </div>
            </div>
        </div>
    );
};

export default BoxPage3;
